<template>
  <el-card header="用户列表" shadow="hover">
    <el-table
      :data="shopList"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="logo"
        fixed="left"
        width="120"
        align="center"
        label="商家Logo">
        <template slot-scope="scope">
          <img :src="scope.row.logo" width="50" style="border-radius: 4px">
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        fixed="left"
        width="120"
        label="商家名称">
        <template slot-scope="scope">
          <el-popover
            title="商家简介"
            width="250"
            trigger="hover"
            :content="scope.row.intro">
            <el-button slot="reference" type="text">{{ scope.row.title }}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="220">
      </el-table-column>
      <el-table-column
        prop="itemNum"
        label="商品量">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="订单量">
      </el-table-column>
      <el-table-column
        prop="rate"
        label="好评率">
        <template slot-scope="scope">
          <el-rate
            :allow-half="true"
            v-model="scope.row.rate"
            disabled>
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="创建日期"
        width="140">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  export default {
    name: "list",
    data() {
      return {
        shopList:  [{
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          rate: 4.5,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          rate: 2.5,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          rate: 3,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          rate: 4,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          rate: 1.5,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }],
        currentPage: 1,
        pageSize: 10,
        total: 20,
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped>

</style>
